<template>
	<gui-page :fullPage="true">
		<template v-slot:gBody>
			<image src="@/static/login/lg_bg.jpg" style="position: fixed; top:0px;left:0px;width:100%;height: 100%;">
			</image>

			<view style="padding:50rpx;position: relative;">
				<view style="height:250rpx;"></view>
				<view class="content" style="">
					<view class="content-item">
						<view class=" gui-dark-bg-level-3 gui-margin-top">
							<gui-switch-navigation :items="items" @change="navchange" textAlign="center"
								:isCenter="true" :size="250" activeClass='gui-color-white'
								activeDirection="center"></gui-switch-navigation>
						</view>
						<view style="height: 80rpx;"></view>
						<form @submit="submit" v-if="verify ===0">
							<view class="gui-flex gui-align-items-center">
								<input v-model="phoneNumber" type="number"
									class="gui-form-input gui-border gui-bg-white" name="phoneNumber"
									placeholder="请输入手机号"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
								<view style="position: absolute;right:80rpx;">
									<!-- <text class="gui-form-icon gui-icons gui-text-center gui-color-gray"
										v-if="phoneNumber.length >= 1" @click="clearphoneNumber">&#xe78a;</text> -->
								</view>
							</view>
							<view class="gui-flex gui-align-items-center">
								<input v-model="smsCode" type="text" class="gui-form-input gui-border gui-bg-white"
									name="smsCode" placeholder="请输入短信验证码"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
								<view style="position: absolute;right:80rpx;">
									<text class="gui-text-center gui-color-blue gui-bold" @click="setMsg"
										v-if="showPhone">发送验证码</text>
									<text class="gui-text-center gui-color-blue gui-bold" @click="setEmail"
										v-if="showPhone == false">{{PhoneCode}}秒后重新发送</text>
								</view>
							</view>

							<view style="margin-top:38rpx;justify-content: space-between;"
								class="gui-flex gui-align-items-center">
								<!-- <view class="gui-bold">下一步</view>
								<view>
									<image src="https://app.lgwisdomunion/static/img/login-but.b251d20f.png" style="height: 140rpx;width: 140rpx;" @click="submit"></image>
								</view> -->
								<button type="primary" class="gui-border-radius-large" style="width: 300rpx;"
									@click="submit()">下一步</button>
							</view>
						</form>

						<form @submit="submit" v-if="verify ===1">
							<view class="gui-flex gui-align-items-center">
								<input v-model="email" type="text" class="gui-form-input gui-border gui-bg-white"
									name="email" placeholder="请输入邮箱"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
								<view style="position: absolute;right:80rpx;">
									<!-- <text class="gui-form-icon gui-icons gui-text-center gui-color-gray "
										v-if="email.length >= 1" @click="clearEmail">&#xe78a;</text> -->
								</view>
							</view>
							<view class="gui-flex gui-align-items-center">
								<input v-model="emailCode" type="text" class="gui-form-input gui-border gui-bg-white"
									placeholder="请输入验证码"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
								<view style="position: absolute;right:80rpx;">
									<text class="gui-text-center gui-color-blue gui-bold" @click="setEmail"
										v-if="showMsg">发送验证码</text>
									<text class="gui-text-center gui-color-blue gui-bold" @click="setEmail"
										v-if="showMsg == false">{{EmailCode}}秒后重新发送</text>
								</view>
							</view>

							<view style="margin-top:38rpx;justify-content: space-between;"
								class="gui-flex gui-align-items-center">
								<!-- <view class="gui-bold">下一步</view>
								<view class="gui-margin-x">
									<button formType="submit" style="height: 100rpx;width: 100rpx;border-radius: 50%;display: flex;justify-content: center;align-items: center;">
										<view><image src="https://app.lgwisdomunion/static/img/login-but.b251d20f.png" style="height: 140rpx;width: 140rpx;margin-top: 35rpx;" @click="jf_login"></image></view>
									</button>
								</view> -->
								<button type="primary">下一步</button>
							</view>
						</form>
					</view>
				</view>
				<view class="gui-relative gui-color-white gui-flex gui-column gui-align-items-center">


				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import request from "@/Grace6/js/request.js";

	import sign from "@/Grace6/js/sign.js";
	import qs from 'qs'
	import string from '@/Grace6/js/string.js';
	// Password

	export default {
		data() {
			return {
				showMsg: true,
				EmailCode: 60,
				showPhone: true,
				PhoneCode: 60,
				token: 'token',
				phoneNumber: '',
				smsCode: '',
				emailCode: '',
				email: '',
				verify: 0,
				items: [{
						id: 0,
						name: '验证手机号'
					},
					{
						id: 1,
						name: '邮箱验证'
					},
				]
			}
		},
		beforeCreate() {
			if (uni.getStorageSync("ttsxAuthToken")) {
				// uni.reLaunch({
				// 	url: "/pages/switchPages/index"
				// });
				uni.reLaunch({
					url:"/pages/switchPages/main?p=index"
				})
			}
		},
		onLoad() {
			uni.hideLoading();
		},
		methods: {
			jf_login() {
				this.$boya.login();
			},
			navchange(e) {
				// console.log(e)
				this.verify = e;
				console.log("this.verify", this.verify)
			},

			// 提交信息
			submit: function(e) {
				console.log('e: ', e)
				if (this.verify == 0) {

					let formData = {
						phoneNumber: this.phoneNumber,
						smsCode: this.smsCode
					}
					var rule = [{
						name: "phoneNumber",
						checkType: "phone",
						checkRule: "/^[1][3,4,5,7,8][0-9]{9}$/",
						errorMsg: "请输入正确的手机号"
					}, ];
					var checkRes = graceChecker.check(formData, rule);
					console.log('数据：', checkRes);
					if (checkRes) {
						this.$lg.Post("/APP/sms/authSmsCode", formData, (res) => {
							if (res.code == "1") {
								uni.navigateTo({
									url: "/pages/login/reset?phone=" + formData.phoneNumber
								});
							} else {
								uni.showToast({
									title: res.msg
								});
							}
						}, null, {
							token: false
						})
					} else {
						uni.showToast({
							title: "请输入正确的手机号!",
							icon: "none",
						})
					}
				} else {
					let data = {
						email: this.email,
						emailCode: this.emailCode
					}
					var rule = [{
						name: "email",
						checkType: "email",
						checkRule: "/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/",
						errorMsg: "请输入正确的邮箱"
					}, ];
					var checkRes = graceChecker.check(data, rule);
					if (checkRes) {
						this.$lg.Post("/APP/email/authEmailCode", data, (res) => {
							console.log(res)
						}, null, {
							token: false
						})
					} else {
						uni.showToast({
							title: "请输入正确的邮箱!",
							icon: "none",
						})
					}
				}
			},

			// 发送手机验证码

			setMsg() {
				let formData = {
					phoneNumber: this.phoneNumber,
					smsType: 3
				}
				var rule = [{
					name: "phoneNumber",
					checkType: "phone",
					checkRule: "/^[1][3,4,5,7,8][0-9]{9}$/",
					errorMsg: "请输入正确的手机号"
				}, ];
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					let data = {
						phone: this.phoneNumber
					}
					let self = this;
					self.$boya.NPost('/app/sms_code', data, function(res) {
						console.log('验证码：', res);
						if (res.code == 200) {

							self.showPhone = false
							self.PhoneCode = 60
							let timer = setInterval(() => {
								self.PhoneCode--;
								if (self.PhoneCode < 1) {
									clearInterval(timer)
									self.PhoneCode = 0
									self.showPhone = true
									uni.showToast({
										title: "验证码已失效，请重新获取",
										icon: "none"
									})
								}
							}, 1000)

							console.log('res: ', res);
						} else {
							self.$boya.msg(res.msg)
						}
					}, null, {
						showError: false
					});

				} else {
					uni.showToast({
						title: "请输入正确的手机号!",
						icon: "none",
					})
				}
			},

			// 发送邮箱验证码
			setEmail() {
				let data = {
					email: this.email
				}
				var rule = [{
					name: "email",
					checkType: "email",
					checkRule: "/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/",
					errorMsg: "请输入正确的邮箱"
				}, ];
				var checkRes = graceChecker.check(data, rule);
				// 验证邮箱是否存在
				if (checkRes) {
					this.$lg.Post("/APP/email/sendEmailCode", data, (res) => {
						console.log(res)
						if (res.data.code == 1) {
							console.log(res)
							// 发送验证码
							this.showMsg = false
							this.EmailCode = 60
							let timer = setInterval(() => {
								this.EmailCode--;
								if (this.EmailCode < 1) {
									clearInterval(timer)
									this.EmailCode = 0
									this.showMsg = true
									uni.showToast({
										title: "验证码已过期",
										icon: "none"
									})
								}
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							})
						}
					}, null, {
						token: false
					})
				} else {
					uni.showToast({
						title: "请输入正确的邮箱!",
						icon: "none",
					})
				}
			},
			clearphoneNumber() {
				this.phoneNumber = ''
			},
			clearEmail() {
				this.email = ''
			}
		}
	}
</script>
<style scoped>
	.content {
		padding: 20rpx;
		color: gray;
		width: 103%;
		height: 800rpx;
	}

	.login-logo {
		width: 180rpx;
		height: 180rpx;
		font-size: 80rpx;
		text-align: center;
		line-height: 120rpx;
		padding: 30rpx;
		border-radius: 18rpx;
	}

	.other-login-icons {
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		font-size: 70rpx;
		margin: 20rpx;
	}
</style>